<template>
  <el-image
    ref="img"
    :preview-src-list="imgSrcs"
    :style="{width:width+'px',height:height+'px','border-radius':'10px'}"
    :src="src"
    :fit="fit"
  />
</template>
<script lang="ts" setup>
import {reactive,watch } from 'vue';
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  height: {
    type: Number,
    default: 150,
  },
  width: {
    type: Number,
    default: 150,
  },
  fit: {
    type: String,
    default: 'fill',
  },
})
let imgSrcs = reactive<Array<string>>([props.src])
watch(props, () => {
  imgSrcs = [props.src]
})
</script>
<style lang="scss" scoped></style>
